<template>
  <div class="category-page">
    <!-- 顶部导航 -->
    <van-nav-bar 
      title="分类（202210913230李进进）" 
      left-text="返回" 
      left-arrow 
      @click-left="onClickLeft" 
    />

    <!-- 分类树形选择 -->
    <van-tree-select 
      v-model:active-id="rightActiveId" 
      v-model:main-active-index="leftActiveIndex" 
      :items="categoryData" 
      class="category-tree"
    >
      <!-- 右侧内容区域 -->
      <template #content>
        <van-grid :column-num="3" icon-size="50px">
          <van-grid-item 
            v-for="item in categoryData[leftActiveIndex]?.children" 
            :key="item.id"
            :to="{ name: 'movelist', query: { categoryId: item.id }}"
            :icon="item.img"
            :text="item.text"
          />
        </van-grid>
      </template>
    </van-tree-select>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTab">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item 
        icon="cluster-o" 
        :to="{ name: 'moveCategory' }"
      >
        分类
      </van-tabbar-item>
      <van-tabbar-item icon="shop-collect-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { CategoryApi } from "@/api"

// 类型定义
interface CategoryItem {
  id: number
  name: string
  text?: string
  img?: string
  parentId: number
  children?: CategoryItem[]
}

// 响应式数据
const activeTab = ref(0)
const rightActiveId = ref(1)
const leftActiveIndex = ref(0)
const categoryData = ref<CategoryItem[]>([{
  text: '浙江',
  children: [
    { 
      text: '杭州', 
      id: 1, 
      img: 'https://m.360buyimg.com/babel/jfs/t1/215072/20/30644/9019/646da7a1F63613a8c/a5b2428860e14917.jpg'
    },
    { 
      text: '温州', 
      id: 2, 
      img: 'https://m.360buyimg.com/babel/jfs/t1/100342/15/41391/10528/646dad13F717b6cd9/a301d60c251994d8.jpg' 
    },
    { 
      text: '宁波', 
      id: 3, 
      disabled: true 
    },
  ],
}])

// 生命周期钩子
onMounted(() => {
  loadCategoryData()
})

// 加载分类数据
const loadCategoryData = async () => {
  try {
    const res = await CategoryApi.select.call()
    
    // 处理数据
    const formattedData = res.map((item: CategoryItem) => ({
      ...item,
      text: item.name
    }))

    // 构建树形结构
    const treeData = formattedData.reduce((acc: CategoryItem[], curr: CategoryItem) => {
      curr.children = formattedData.filter(item => item.parentId === curr.id)
      if (curr.parentId === 0) {
        acc.push(curr)
      }
      return acc
    }, [])

    categoryData.value = treeData
  } catch (error) {
    console.error('加载分类数据失败:', error)
  }
}

// 事件处理
const onClickLeft = () => history.back()
</script>

<style scoped>
.category-page {
  min-height: 100vh;
  background: #f7f8fa;
}

.category-tree {
  height: calc(100vh - 96px);
}

:deep(.van-tree-select__nav) {
  background: #fff;
}

:deep(.van-tree-select__content) {
  background: #fff;
}

:deep(.van-grid-item__icon) {
  font-size: 28px;
}

:deep(.van-grid-item__text) {
  color: #323233;
  font-size: 14px;
  margin-top: 8px;
}
</style>